<template>
  <div class="bk">
    <b-collapse class="cbtn" visible id="collapse">
      <b-button-group vertical class="mr-1">
        <b-button @click="comName = 'Scenery'">景区查询</b-button>
        <b-button @click="comName = 'Travel'">旅行社查询</b-button>
        <b-button @click="comName = 'PathQuery'">路径查询</b-button>
      </b-button-group>
      <div class="form">
        <keep-alive>
          <component
            :is="comName"
            :map="frompanelFromMap"
            @sendParam="getParams"
          ></component>
        </keep-alive>
      </div>
    </b-collapse>
    <div class="setting">
      <b-button class="down" v-b-toggle.collapse @click="changeIcon">
        <b-icon :icon="iconName"></b-icon
      ></b-button>
      <div class="switch">
        <b-form-checkbox switch v-model="checked1" @change="BorderSwitch"
          >边界</b-form-checkbox
        >
        <b-form-checkbox switch v-model="checked2" @change="PolygonSwitch"
          >面域</b-form-checkbox
        >
      </div>
    </div>
  </div>
</template>

<script>
import bus from "../eventBus.js";
import QS from "qs";
import * as turf from "@turf/turf";
import Scenery from "@/components/home/query/scenery.vue";
import Travel from "@/components/home/query/travel.vue";
import PathQuery from "@/components/home/query/pathquery.vue";
export default {
  name: "Form",
  data() {
    return {
      checked1: false,
      checked2: false,
      comName: "Scenery",
      frompanelFromMap: null,
      borderLayer: null,
      polygonLayer: null,
      iconName: "chevron-down",
      cityinfo: null,
      cityparam: null,
      cityCenter: null,
      travelInfo: [],
    };
  },
  components: {
    Scenery,
    Travel,
    PathQuery,
  },
  created() {
    window.TravelAtt = this.handleClick;
    bus.$on("sharemap", (val) => {
      this.frompanelFromMap = val;
    });
    this.getBorder();
  },
  methods: {
    getBorder() {
      this.$axios.get("http://127.0.0.1/city/border").then((res) => {
        const cityBorder = res.data;
        this.borderLayer = L.geoJSON(cityBorder, {
          style: function (feature) {
            return { color: "red" };
          },
        });
      });
    },
    getPolygon() {
      const map = this.frompanelFromMap;
      const name = this.cityparam;

      this.$axios
        .get("http://127.0.0.1/city/polygon", {
          params: {
            name: name,
          },
          paramsSerializer: function (params) {
            return QS.stringify(params, { indices: false });
          },
        })
        .then((res) => {
          this.cityinfo = res.data;
          let Layerarr = new Array();
          for (let i = 0; i < this.cityinfo.length; i++) {
            const cityName = this.cityinfo[i].cityname;
            const num = this.cityinfo[i].travel[0].length;
            const popupContent = `<p>市区名称：</p><b style="font-size:15px">${cityName}</b><p>旅行社数量:${num}</p><p style="text-align: right;"><a href="#/travel" onclick="TravelAtt()">详细信息</a></p>`;
            Layerarr[i] = L.geoJSON(this.cityinfo[i].geojson, {
              style: function (feature) {
                return { color: "blue" };
              },
            }).bindPopup(popupContent);
            Layerarr[i].on("popupopen", () => {
              let center = turf.centroid(this.cityinfo[i].geojson);
              this.cityCenter = {
                lon: center.geometry.coordinates[0],
                lat: center.geometry.coordinates[1],
              };
              this.travelInfo = this.cityinfo[i].travel[0];
            });
          }
          this.polygonLayer = L.layerGroup(Layerarr);
          map.addLayer(this.polygonLayer);
        });
    },
    BorderSwitch() {
      const map = this.frompanelFromMap;
      if (this.checked1) {
        map.addLayer(this.borderLayer);
      } else {
        map.removeLayer(this.borderLayer);
      }
    },
    PolygonSwitch() {
      const map = this.frompanelFromMap;
      if (this.checked2) {
        this.getPolygon();
      } else {
        map.removeLayer(this.polygonLayer);
      }
    },
    changeIcon() {
      if (this.iconName == "chevron-down") {
        this.iconName = "chevron-up";
      } else {
        this.iconName = "chevron-down";
      }
    },
    getParams(val) {
      this.cityparam = val;
    },
    handleClick() {
      const map = this.frompanelFromMap;
      const lat = this.cityCenter.lat;
      const lon = this.cityCenter.lon;
      map.flyTo([lat, lon], 9, {
        duration: 0.1,
      });
      //异步发送数据
      setTimeout(() => {
        this.sendTravel();
      }, 0);
      //控制属性面板显示
      bus.$emit("VisibPanel", "True");
    },
    sendTravel() {
      bus.$emit("shareTravel", this.travelInfo);
    },
  },
};
</script>

<style scoped>
.bk {
  position: fixed;
  bottom: 0;
  left: 15%;
  padding: 0;
  z-index: 1;
  background: white;
  width: 60%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cbtn {
  display: flex;
  flex-basis: 100%;
}
.setting {
  width: 100%;
  display: flex;
}
.mr-1 {
  width: 17%;
}
.down {
  width: 17%;
}
.switch {
  width: 83%;
  height: 100%;
  display: flex;
  justify-content: space-around;
}
button {
  border-radius: 0;
}
</style>